<template>
  <div :style="{'width': isExhibition || showMobilePage ? 'unset' : '542px'}" :class="{'mobile-royalty-wrap': showMobilePage}" class="base-author-royalty-wrap">
    <div v-if="!isExhibition" class="pay-way">
      <el-form-item :prop="moduleName + '.payWay'" label-width="80px" label="">
        <el-select v-model="selectData.payWay" :popper-class="`global-select-down ${showMobilePage?'mobile-royalty-select':''}`" placeholder="分期类型" >
          <!-- <el-option
            label="请选择"
            value=""
          /> -->
          <el-option
            v-for="item in agingTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value" />
        </el-select>
      </el-form-item>
    </div>
    <div v-if="!isExhibition" :class="{'mobile-create-flex': showMobilePage}" class="stages-box">
      <div class="stages">
        <div v-for="(item, index) in selectData.payDates" :key="index" class="date-picker-item stages-date-picker-error">
          <el-form-item :rules="rules['authorBillInfo.payDeadline.payDates.date']" :prop="'authorBillInfo.payDeadline.payDates.' + index + '.date'">
            <stages-date-picker :index="index" v-model="item.date" :show-delete-btn="isCanAddDate && selectData.payDates.length > 1" @delete="deleteStage" />
          </el-form-item>
        </div>
      </div>
      <div v-if="isCanAddDate" class="add-btn" @click="add">
        添加
      </div>
    </div>
    <div v-if="isExhibition">
      <div style="display: flex; flex-wrap: wrap;">
        <div class="gray-radio" style="color:#406eff;">基础授权使用费类</div>
        （{{ selectData.payWay | mapOptions(agingTypeOptions) }}）
      </div>
      <div v-if="selectData.payDates && selectData.payDates.length" :style="`margin-left: ${showMobilePage?'0':'68px'};`">
        <div v-for="(item, index) in selectData.payDates" :key="index" style="color: #666;">
          {{ `付款日期（第${index + 1}期）: ` }}{{ item.date / 1000 | standardFormat('YYYY/MM/DD') }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { agingTypeOptions } from '../../module/options';
import StagesDatePicker from './stagesDatePicker';
import addIcon from '@/assets/reportManage/add_icon.png';
import { mapOptions } from '@/filters';
import { standardFormat } from '@/filters/date';
export default {
  name: 'BaseAuthorRoyalty',
  components: { StagesDatePicker },
  filters: {
    mapOptions,
    standardFormat
  },
  model: {
    prop: 'params',
    event: 'change'
  },
  props: {
    params: {
      type: Object,
      default: () => {
        return null;
      }
    },
    moduleName: {
      type: String,
      default: ''
    },
    rules: {
      type: Object,
      default: () => {
        return null;
      }
    },
    isExhibition: {
      type: Boolean,
      default: false
    },
    showMobilePage: {// 移动端
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      agingTypeOptions,
      addIcon
    };
  },
  computed: {
    selectData: {
      get() {
        return this.params;
      },
      set(val) {
        this.$emit('change', val);
      }
    },
    isCanAddDate() {
      return this.selectData.payWay !== 1;
    }
  },
  methods: {
    add() {
      const item = { date: '' };
      this.selectData.payDates.push(item);
    },
    deleteStage(index) {
      if (index !== -1) {
        this.selectData.payDates.splice(index, 1);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import url('./common.scss');
.pay-way {
  & ::v-deep {
    .el-input__inner {
      width: 120px !important;
    }
  }
}
.date-picker-item {
  display: flex;
}
.stages-date-picker-error {
  & ::v-deep {
    .el-form-item__error {
      margin-left: 120px;
    }
  }
}
.mobile-create-flex {
  ::v-deep {
    .el-form-item {
      margin-bottom: 16px !important;
    }
    .el-form-item__error {
      margin-left: 0 !important;
    }
  }
  .stage-items {
    flex-wrap: wrap;
  }
  .date-picker-item {
    margin-bottom: 0 !important;
  }
}
</style>
<style lang="scss">
  .mobile-royalty-wrap {
    min-width: unset !important;
    .pay-way {
      .el-input__inner {
        width: 100% !important;
      }
    }
  }
</style>
